<template>
	<h1>{{ state.count }} * 2 = {{ double }}</h1>
	<h2>{{ num }}</h2>
	<button @click="add">累加</button>
  <!-- teleport可以渲染vue的组件内容到指定的dom节点，做弹窗比较有用  -->
	<Teleports></Teleports>
  <!-- Supense异步组件的方式 -->
  <h1>Supense</h1>
  <Suspense>
    <template #default>
      <AsyncComponent :timeout="3000"/>
    </template>
    <template #fallback>
        <Loading/>
    </template>
  </Suspense>
</template>

<script>
  import Teleports from '@/components/Teleports.vue'
  import AsyncComponent from '@/components/AsyncComponent'
  import Loading from '@/components/loading'
	import { computed, reactive, ref, onMounted } from 'vue'
	export default {
    components:{
      Teleports,
      AsyncComponent,
      Loading
    },
		// composition的入口，函数内部在beforeCreate之前调用，函数返回的内容会作为模板渲染的上下文
		setup() {
			//alert('setup')
			// reactive把复杂数据变成响应式
			const state = reactive({
				count: 1,
			})
			// ref可以把基本的数据机构包装成响应式
			const num = ref(2)

			function add() {
				state.count++
				num.value += 10
			}
			const double = computed(() => state.count * 2)
			onMounted(() => {
				//alert('onmounted')
			})
			return {
				state,
				add,
				double,
        num
			}
		},
		beforeCreate() {
			//alert('beforecreate')
		},
		created() {
			console.log('created')
		},
		beforeMount() {
			//alert('mount')
		},
		mounted() {
			//alert('mouted')
		},
	}
</script>
